 <template>
    <div class="menuCover">
            <div class="title">套餐C(2888元/桌)</div>
            <div class="box">
                         <div class="cost">服务费</div>
            <div class="coldMenu">
                <div class="coldName">
                    【冷菜】
                </div>
                <div class="list">
                    <span>世纪八味碟</span>
                </div>
            </div>
            <div class="hotMenu">
                <div class="hotName">
                    【热菜】
                </div>
                   
            <div class="list">
                                  <span>鸿运卤水饼</span>
                <span>白灼基围虾</span>
                <span>脆皮牛肉卷</span>
                <span>明珠炖冒菜</span>
                <span>果木片皮鸭</span>
                <span>清蒸珍珠斑</span>
                <span>绿叶围酱方</span>
                <span>蒜苔蒸扇贝</span>
                <span>珍菌草鸡汤</span>
                <span>芹香抄百合</span>
                <span>上汤浸时蔬</span>
            </div>
                   
            </div>
            <div class="soupMenu">
                <div class="soupName">
                    【汤品】
                </div>
              <div class="list">
                    <span>芙蓉银鱼羹</span>
                <span>莲子红豆沙</span>
              </div>
            </div>
            <div class="foodMenu">
               <div class="foodName">
                    【主食】
               </div>
              <div class="list">
                    <span>松子玫瑰糕</span>
                <span>苏式八宝饭</span>
              </div>
            </div>
            <div class="fruitMenu">
              <div class="fruitName">
                    【果盘】
              </div>
               <div class="list">
                    <span>时令水果盘</span>
               </div>
            </div>
            </div>
    </div>
</template>
<script>
export default {};
</script>
<style scoped>
.menuCover {
  height: 350px;
  margin: 30px 65px 30px 65px;
  background-color: #333233;
}
.menuCover .title {
  padding-top: 20px;
  text-align: center;
  color: #fe3b88;
  font-size: 18px;
  font-weight: 700;
}
.menuCover .box {
  margin: 30px 40px 0 40px;
}
.menuCover .cost {
  padding: 0 0 20px 50px;
  color: aliceblue;
  border-bottom: 1px solid #5c5c5c;
}
.box .coldMenu {
  margin-top: 20px;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  /* margin-right: 50px; */
}
.box .coldMenu .coldName {
  width: 15%;
  height: 100%;
}

.box .coldMenu span {
  width: 20%;
}
.box .hotMenu {
  margin-top: 10px;
  color: #fff;
  display: flex;
  justify-content: space-between;
}
.box .hotMenu .hotName {
  height: 100%;
  width: 15%;
}
.box .hotMenu .list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.box .hotMenu span {
  width: 20%;
}
.box .soupMenu {
    margin-top: 10px;
  color: #fff;
  display: flex;
  justify-content: flex-start;
}
.box .soupMenu .soupName {
  height: 100%;
  width: 15%;
}
.box .soupMenu .list {
  /* display: flex;
  justify-content:  flex-start;
flex-wrap: nowrap; */

}
.box .soupMenu span {
  width: 20%;
  margin-right: 50px;
}
.box .foodMenu {
      margin-top: 10px;
  color: #fff;
  display: flex;
  justify-content: flex-start;
}
.box .foodMenu .foodName {
  height: 100%;
  width: 15%;
}
.box .foodMenu .list {
  /* display: flex;
  justify-content: space-between;
  flex-wrap: wrap; */
}
.box .foodMenu span {
  width: 20%;
    margin-right: 50px;
}
.box .fruitMenu {
  margin-top: 10px;
  color: #fff;
  display: flex;
  justify-content: flex-start;
}
.box .fruitMenu .fruitName {
  height: 100%;
  width: 15%;
}
.box .fruitMenu .list {
  /* display: flex;
  justify-content: space-between;
  flex-wrap: wrap; */
}
.box .fruitMenu span {
  width: 20%;
    margin-right: 50px;
}
</style>

